<template>
  <div class="box">
    <div class="main">
      <div class="mb20 f jcsb aie">
        <img src="@/assets/images/custonTest.png" alt="" />
        <el-button type="primary" color="#3377FF" @click="goPath('/custom')"
          >创建试卷</el-button
        >
      </div>

      <div>
        <div class="f mb30" v-for="(item,index) in dataList">
          <div :class="'radius10 '+item.bgClass">
           {{item.imgName}}
          </div>
          <div class="bb1 f jcsb aic f1 ml30">
            <div>
              <div class="f18 bold mb20">{{ item.exameTitle }}</div>
              <div class="f f14 opacity7 ml10">
                <div>共{{ item.questionNum }}道题</div>
                <div class="ml30">总分{{ item.paperScoreCount }}分</div>
              </div>
            </div>
            <div class="btn-group">
<!--              <el-button-->
<!--                type="danger"-->
<!--                plain-->
<!--                round-->
<!--                color="#f01414"-->
<!--                @click="goPath('/custom')"-->
<!--                >编辑</el-button-->
<!--              >-->
              <el-button
                type="danger"
                round
                color="#f01414"
                @click="handleGoToAnswer(item)"
                >进入考试</el-button
              >
              <el-button
                type="primary"
                round
                color="#3377FF"
                :disabled="item.boolView==false"
                @click="toReport(item) "
                >考试报告</el-button
              >
              <el-button
                type="danger"    plain  round
                color="#f01414"     @click="delData(item)" >删除</el-button
              >
            </div>
          </div>
        </div>


        <div class="f column aie">
          <el-pagination
              @size-change="changeSize"   @current-change="changePage"  :current-page="currentPage"  :page-size="pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
          <!-- :hide-on-single-page="value" -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRouter } from "vue-router";
import {delTestData, getFreeTestList} from "@/api/custom/custom";
import {ElMessage,ElMessageBox} from "element-plus";
const counterStore = useCounterStore();
const route = useRouter();
const dataList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
function loadData() {
  getFreeTestList({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }).then((res) => {
    dataList.value = res.rows;
    for (let i = 0; i < dataList.value.length; i++) {
      let itemData = dataList.value[i];
      itemData.bgClass = "c"+i%5
      if(itemData.exameTitle==null||itemData.exameTitle.length<2){
        itemData.imgName= itemData.exameTitle
      }else{
        itemData.imgName= itemData.exameTitle.substring(0,2)
      }
    }
  });
}

function changeSize(data){
  pageSize.value=data;
  loadData();
};
function changePage(data){
  currentPage.value = data;
  loadData();
}
const goPath = (path) => {
  route.push(path);
};

const delData = (item) => {
  ElMessageBox.confirm("确认删除吗?", "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }) .then(() => {
    delTestData(item.exameId).then(res=>{
      loadData();
    })
  })
  .catch((error) => {
    if (error === "cancel") {
      console.log("点击了取消");
    }
  });
  console.log(item)
};
const toReport = (item) => {
  route.push({
    path:'/report',
    query: {
      id: item.exameId
    }
  })
};
onMounted(() => {
  loadData(); // 初始化加载数据
});
const handleGoToAnswer = (item) => {
  route.push({
    path: '/answer',
    query: {
      exameId: item.exameId
    }
  });
}
</script>

<style lang="scss" scoped>

.c0 {
  background-color: #7db3d9
}

.c1 {
  background-color: #8ca3cd
}

.c2 {
  background-color: #bc9edd
}

.c3 {
  background-color: #d1ae9d
}

.c4 {
  background-color: #84cab0
}

.c6 {
  background-color: #ca8484
}

.c7 {
  background-color: #7db3d9
}

.c8 {
  background-color: #8ca3cd
}

.c9 {
  background-color: #bc9edd
}

.c10 {
  background-color: #d1ae9d
}

.c4 {
  background-color: #84cab0
}

.c5 {
  background-color: #ca8484
}



.radius10{
  display: flex;
  width: 130px;
  height: 100px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}



.box {
  background: #fff;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 100px 0 20px;
  min-height: calc(100vh - 140px);
  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px #e8e8e8;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
    }
    .correction {
      color: #f01414;
    }
    &:hover {
      box-shadow: 0 0 5px 2px #f9b7b7;
    }
  }
}
:deep(.el-button) {
  width: 100px;
  height: 32px;
  line-height: 32px;
}
</style>
